<div class="d-flex flex-column horizontal-expand mb-3">
  <div class="container-fluid d-flex justify-content-center bg-primary m-1">
    <h3 class="py-2">Remote Monitor</h3>
  </div>
  <div class="d-flex flex-column horizontal-expand justify-content-between">

    <!-- Monitoring Details -->
    <div id="monitoring-details" class="horizontal-expand">
    </div>

    <div class="d-flex flex-column justify-content-between horizontal-expand bg-light m-1">
      <div class="d-flex justify-content-between horizontal-expand">
        <span id="monitor-config-id" style="display: none;"><%= @config['id'] %></span>
        <div class="col-7 d-flex justify-content-between bg-secondary m-1 p-2">
          <div class="col-2">Name</div>
          <div class="col"><input id="name" type="text" class="form-control" placeholder="<%= CGI.escapeHTML @name %>"></div>
          <div class="col-2"><button class="btn btn-info" onclick="saveMonitorConfig($('#name').val() || $('#name').attr('placeholder'), $('#ip').val() || $('#ip').attr('placeholder'), $('#query_port').val() || $('#query_port').attr('placeholder'), $('#rcon_port').val() || $('#rcon_port').attr('placeholder'), $('#rcon_password').val() || $('#rcon_password').attr('placeholder'));">Save</button></div>
        </div>
        <div class="d-flex col-2 justify-content-start horizontal-expand bg-secondary m-1 p-2">
          <button id="start-stop-monitor" type="button" class="btn btn-success btn-block" onclick="toggleMonitor();">Start Monitor</button>
        </div>
        <ul class="nav nav-pills col-3 flex-column bg-secondary m-1 p-2">
          <li class="nav-item dropdown horizontal-expand d-flex justify-content-end">
            <a id="server-monitor-configs-label" class="horizontal-expand nav-link dropdown-toggle active text-center" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Configs</a>
            <div class="dropdown-menu horizontal-expand" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
              <div id='server-monitor-configs' class="horizontal-expand d-flex flex-column">
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="d-flex horizontal-expand">
        <!-- Target Host -->
        <div class="d-flex col-4 justify-content-start horizontal-expand bg-secondary m-1 p-2">
          <div class="col-4">IP</div>
          <div class="col-8">
            <input id="ip" type="text" class="form-control" placeholder="127.0.0.1">
          </div>
        </div>

        <!-- Query Port -->
        <div class="d-flex col-5 justify-content-start horizontal-expand bg-secondary m-1 p-2">
          <div class="col-5">Query Port</div>
          <div class="col-7">
            <input id="query_port" type="text" class="form-control" placeholder="<%= @config['query_port'] || @config['server_query_port'] %>">
          </div>
        </div>

        <ul class="nav nav-pills col-3 flex-column bg-secondary m-1 p-2">
          <li class="nav-item dropdown horizontal-expand d-flex justify-content-end">
            <a id='active-server-monitors-label' class="horizontal-expand nav-link dropdown-toggle active text-center" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Active Monitors</a>
            <div class="dropdown-menu horizontal-expand" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
              <div id='active-server-monitors' class="horizontal-expand d-flex flex-column">
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="d-flex horizontal-expand">
        <!-- RCON Port -->
        <div class="d-flex col-4  justify-content-start horizontal-expand bg-secondary m-1 p-2">
          <div class="col-4">RCON Port</div>
          <div class="col-8">
            <input id="rcon_port" type="text" class="form-control" placeholder="<%= @config['rcon_port'] || @config['server_rcon_port'] %>">
          </div>
        </div>

        <!-- Server Password -->
        <div class="d-flex col-8 justify-content-start horizontal-expand bg-secondary m-1 p-2">
          <div class="col-3">RCON Password</div>
          <div class="col-5">
            <input id="rcon_password" type="text" class="form-control blur" placeholder="<%= @config['rcon_password'] || @config['server_rcon_password'] %>">
          </div>
          <div class="col-4">
            <button id="rcon_password_revealer" type="button" class="btn btn-success horizontal-expand mr-4" onclick="revealHide('#rcon_password', '#rcon_password_revealer');">Reveal</button>
          </div>
        </div>
      </div>
    </div>


    <!-- RCON -->
    <div class="d-flex justify-content-between horizontal-expand bg-light m-1 p-2">
      <div class="ml-4 col-4">Server RCON</div>
      <div class="ml-4 col horizontal-expand">
        <input id="rcon_input" type="text" class="form-control horizontal-expand" placeholder="listplayers">
      </div>
      <div class="col-2 justify-content-end">
        <div class="d-flex justify-content-between">
          <button type="button" class="btn btn-secondary m-1" onclick="$('#rcon_input').val('');">Clear</button>
          <button type="button" class="btn btn-info m-1" onclick="if ($('#rcon_input').val() || $('#rcon_input').attr('placeholder')) { tailProcess('#rcon-log',  '/rcon', 1000, {'command': $('#rcon_input').val() || $('#rcon_input').attr('placeholder'),
                  'host': $('#ip').val() || $('#ip').attr('placeholder'),
                  'port': $('#rcon_port').val() || $('#rcon_port').attr('placeholder'),
                  'pass': $('#rcon_password').val() || $('#rcon_password').attr('placeholder')});}">Send</button>
        </div>
      </div>
    </div>

    <!-- RCON Log -->
    <div class="d-flex flex-column justify-content-start horizontal-expand m-1 p-2 bg-light">
      <div class="d-flex justify-content-between horizontal-expand">
        <div class="ml-4 col-2 horizontal-expand">RCON Log</div>
        <div class="col-4 justify-content-end">
            <button type="button" class="btn btn-secondary m-1" onclick="$('#rcon-log').html('');">Clear</button>
            <button type="button" class="font-weight-bold btn btn-info m-1" onclick="resetLogScroll('#rcon-log', true);">Tail</button>
        </div>
      </div>
      <pre id='rcon-log' class="log log-lg"></pre>
    </div>

  </div>
</div>
